<template>

	<view class="content">
		<hj-dragabledrawer class="iii" :options="options" ref="dragBox" @open="afterOpen" @close="afterClose">
			<view class="hj-screen-btn">
				<image src="/static/image/shaixuan@2x.png" mode="aspectFit" style="width: 26rpx; height: 30rpx;">
				</image>
				<text>更多筛选:</text>
			</view>
			<view class="vvv" @click="close()">
				<!-- <view @click="DatePicker('range')" class="hj-item">
					<text>{{sDate}}
						{{eDate}}</text>
				</view> -->

				<!-- <view class="hj-item" @click="close()">
					<picker v-for="(item,index) in sexList" mode="selector" :range="item.content" :value="index"
						@change="pickerChange" @click="pickerIndex=index" :key="index">
						<text>{{item.text}}</text>
					</picker>
				</view>
 -->
				<!-- 	<view class="hj-item" @click="close()">
					<picker mode='selector' :range="planName" @change="bindPickerChange" :value="Pindex"
						:range-key="'cardName'" :key="Pindex">
						<text>{{cardName}}</text>
					</picker>
				</view> -->

			</view>
			<input class="hj-input" v-model="consultants" type="text" value="" placeholder="点击输入客户搜索" maxlength="10"
				@input="doSearch(e)" />
		</hj-dragabledrawer>

		<view class="kehutianjia" @click="visitingRegistrationTo">
			<image src="../../static/image/tianjia@2x.png" mode=""></image>
		</view>

		<view class="cus-nav">
			<!-- 时间筛选 -->
			<view class="nav-item" @click="DatePicker('range')">
				<text>
					{{sDate}}
					{{eDate}}</text>
				<image src="../../static/image/sanjiaoxing-l@2x.png"></image>
			</view>
			<mx-date-picker class="mx-date-picker" :show="showPicker" :type="type" :value="value" :show-tips="true"
				:begin-text="'开始'" :end-text="'结束'" :show-seconds="true" @confirm="ed" @cancel="el"
				format="yyyy-mm-dd" />


			<!-- 性别筛选 -->
			<view class="nav-item">
				<picker v-for="(item,index) in sexList" mode="selector" :range="item.content" :value="index"
					@change="pickerChange" @click="pickerIndex=index" :key="index">
					<text>{{item.text}}</text>
					<image src="../../static/image/sanjiaoxing-l@2x.png"></image>
				</picker>
			</view>

			<!-- 意向产品筛选  -->
			<view class="nav-item">
				<!-- <text>意向产品</text> -->
				<picker mode='selector' :range="planName" @change="bindPickerChange" :value="Pindex"
					:range-key="'cardName'" :key="Pindex">
					<text>{{shortName}}</text>
					<image src="/static/image/sanjiaoxing-l@2x.png"></image>
				</picker>
			</view>
			<view class="screen-btn" @tap="open">
				<image src="/static/image/shaixuan@2x.png" mode="aspectFit" style="width: 26rpx; height: 30rpx;">
				</image>
				<text>更多筛选</text>
			</view>
		</view>

		<view class="ooo">
			<input class="cus-input" v-model="consultants" type="text" value="" placeholder="点击输入客户搜索" maxlength="10"
				@input="doSearch(e)" />
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
				<customer-list :list="customers"></customer-list>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import hjDragabledrawer from '@/components/hj-dragabledrawer/hj-dragabledrawer.vue'; //这里修改下插件的相对路径
	let dragBox;
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MxDatePicker,
			hjDragabledrawer
		},
		data() {
			return {
				options: {
					visible: false,
					rightMode: true,
					autoClose: true,
					pulldown: true
				},
				customers: [],
				// 筛选为空
				upOption: {
					noMoreSize: 0, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					empty: {
						icon: '/static/image/zanwushuju@2x.png',
						tip: '~ 无结果 ~' // 提示
					},
				},

				page: '',
				//时间
				showPicker: false,
				range: [{ //时间数组
					n: '',
					m: '',
				}],
				type: 'rangetime',
				value: [{}],
				newDate: '', //返回当前时间
				sTime: '', //开始时间
				eTime: '', //结束时间
				sDate: '时 间',
				eDate: '',
				//时间结束

				//性别
				sexList: [{
					content: ['不限', '男', '女'],
					num: ['', '0', '1'],
					text: '性 别',
				}],
				// 定义当前点击获取的下标，数组是从【0】开始的；
				pickerIndex: 0,
				gender: "",
				//性别结束

				//产品意向
				planName: [],
				Pindex: 0,
				cardName: '产品意向',
				shortName: '产品意向',
				qqqq: [],

				//接待人
				// receptionistMan11: '',
				consultants: '',

				//显示列表
				customerList: [{
					consultId: "", //ID
					consultants: "", //姓名
					genderText: "", //性别
					age: "", //年龄
					phone: "", //手机号
					idCard: "", //身份证号
					manLevelName: "", //客户级别
					job: "", //职业
					carInfo: "", //车辆
					dressedIn: "", //穿着
					planShortName: "", //产品方案
					cardFee: "", //会员卡费
					receptionistMan: "", //接待人员
					visitDate: "", //来访时间
				}],
				//列表结束

			}
		},
		onReady() {
			dragBox = this.$refs.dragBox;
		},
		onLoad() {
			this.getShort() //加载产品意向picker里的数据
			this.getNewDate() //加载当前时间方法
			this.pushDate() //加载修改时间数组方法

		},
		methods: {
			open() {
				dragBox.open();
			},
			close() {
				dragBox.close();
			},
			afterOpen() {
				// uni.showToast({
				// 	title: 'open',
				// 	icon: 'none'
				// });
			},
			afterClose() {
				// uni.showToast({
				// 	title: 'close',
				// 	icon: 'none'
				// });
			},

			//添加按钮
			visitingRegistrationTo() {
				uni.navigateTo({
					url: "/pages/visitingRegistration/visitingSearch"
				})
			},

			//时间筛选开始
			DatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			getNewDate() { //获取当前时间并打印
				var yy = new Date().getFullYear();
				var mm = new Date().getMonth() + 1;
				var dd = new Date().getDate();
				this.newDate = yy + '/' + mm + '/' + dd;
				// //console.log(this.newDate);	
			},
			ed(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					//console.log('value => ' + e.value);
					//原始的Date对象
					// //console.log('date => ' + e.date);
					var times = this[this.type]
					var times = times.toString(); //把时间转换为String类型
					var sTime = times.slice(0, 10) //分割字符串得到开始时间
					var eTime = times.slice(11, 21) //分割字符串得到结束时间
					this.sTime = sTime
					this.eTime = eTime
					//console.log("sTime=" + sTime)
					//console.log("eTime=" + eTime)
					this.sDate = this.sTime
					this.eDate = this.eTime
					// this.getCusList()
					this.doSearch(e)
				}
			},
			el(e) {
				this.showPicker = false;
				this[this.type] = '';
				//console.log(this[this.type])
				this.sDate = ' 时 间 '
				this.eDate = ''
				this.sTime = ''
				this.eTime = ''
				this.doSearch(e)
			},
			pushDate() { //修改时间数组为当前时间
				// //console.log(this.newDate),
				this.$set(this.range, 0, this.newDate)
				this.$set(this.range, 1, this.newDate)
				// //console.log(this.range)
			},
			//性别
			pickerChange: function(e) {
				this.sexList[this.pickerIndex].text = this.sexList[this.pickerIndex].content[e.detail.value];
				this.gender = this.sexList[this.pickerIndex].num[e.detail.value]
				//console.log("=========" + this.gender)
				// this.getCusList()
				this.doSearch(e)
			},
			//产品意向
			bindPickerChange(e) { //获取picker里面的值
				this.order = e.target.value
				//console.log("order=" + this.order)
				this.shortName = this.planName[this.order].shortName
				this.cardName = this.planName[this.order].cardName.toString();
				if (this.cardName == '不限') {
					this.shortName = '不限'
				}
				//console.log("shortName=" + this.shortName)
				//console.log("cardName=" + this.cardName)
				this.doSearch(e)
			},
			async getShort() { //要到产品列表的数据
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部，. await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-sale/config/plan/',
						method: "get",
					})
				//console.log(res.msg)
				this.planName = res.body.salePlan.data;
				//console.log("plan=", this.planName[1].cardName)
				for (let i = 0; i < this.planName.length; i++) {
					// //console.log(i)
					this.planName[i].cardName = "【" + this.planName[i].cardName + '】' + this.planName[i].shortName
				}

				this.qqqq = res.body.salePlan.data;
				// //console.log("++++++++" + this.planName)
				let planName = res.body.salePlan.data;

				//console.log("111111111", planName)
				planName.unshift({
					cardName: '不限',
				})
				//console.log(this.planName)
			},

			// 搜索
			doSearch(word) {
				this.curWord = word
				this.customers = []; // 先清空列表,显示加载进度
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// 自写
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				// 第1种: 请求具体接口
				let shortName = this.shortName
				if (this.cardName == '不限' || this.cardName == '产品意向') {
					shortName = ''
					//console.log("shortName======" + shortName)
				}
				//console.log("sTime=====" + this.sTime + "eTime=====" + this.eTime)
				uni.request({
					url: 'http://pm.gxtimeloit.com:10030/api-sale/control/consult/?planShortName=' + shortName +
						'&gender=' + this
						.gender + '&visitDateEnd=' + this.eTime + '&visitDateStart=' + this.sTime +
						'&consultants=' + this.consultants + '&pageSize=' + pageSize + '&pageNumber=' +
						pageNum,

					success: (data) => {
						if (data.data.body.saleConsults.data == null) {
							this.mescroll.endBySize(0, 0);
						} else {
							//console.log("22222222222", data)
							// const res = data
							if (data.data.body.saleConsults.data == null) {}
							// 接口返回的当前页数据列表 (数组)
							let curPageData = data.data.body.saleConsults.data;
							// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
							let curPageLen = curPageData.length;
							// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
							let totalPage = data.data.body.saleConsults.totalPage;
							// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
							let totalSize = data.data.body.saleConsults.totalSize;
							// 接口返回的是否有下一页 (true/false)
							let hasNext = data.xxx;
							// //console.log(data.data.body.settlement.data)
							// //console.log(data)
							// 请求成功,隐藏加载状态
							this.mescroll.endSuccess()
							if (page.num == 1) this.customers = []; //如果是第一页需手动制空列表
							// this.meters = this.meters.concat(data.data.body.settlement.data); //追加新数据
							this.customers = this.customers.concat(curPageData);


							this.mescroll.endByPage(curPageLen, totalPage); //隐藏下拉刷新和上拉加载的状态
						}
					},
					fail: () => {
						// 请求失败,隐藏加载状态
						this.mescroll.endErr()
					}
				})
			},
		}
	};
</script>

<style>
	@font-face {
		font-family: 'ppf';
		src: url('/static/font/pf.ttf');
	}

	* {
		margin: 0rpx;
		padding: 0rpx;
		font-family: 'ppf';
		word-spacing: 10rpx;
	}

	.cus-heder {
		width: 100%;
		height: 120rpx;
		background-color: #109ef8;
		text-align: center;
	}

	.cus-heder text {
		color: white;
		font-weight: 600;
		font-size: 38rpx;
		/* margin-left: 50rpx; */
		word-spacing: 100rpx;
	}

	.cus-nav {
		height: 90rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		position: fixed;
		z-index: 9;
		/* margin-top: -20rpx; */
	}

	.nav-item {
		margin-top: 7rpx;
		height: 70rpx;
		/* background-color: #007AFF; */
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		/* border: 1rpx solid; */
	}

	.nav-item text {
		font-size: 28rpx;
		margin: 20rpx;
	}

	.nav-item image {
		width: 20rpx;
		height: 16rpx;
	}

	.cus-input {
		width: 95%;
		height: 60rpx;
		margin-left: 20rpx;
		background-color: #FFFFFF;
		border-radius: 5px;
		/* position: fixed;
		z-index: 999;
		margin-top:100rpx ; */
	}

	.ooo {
		z-index: 999;
		padding-top: 15%;
	}

	.cus-wrap {
		align-items: center;
		justify-content: center;
	}

	.content {
		text-align: center;
		height: 100%;
	}

	.cusList {
		border-radius: 7px;
		height: 160rpx;
		width: 95%;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		box-shadow: 0px 3px 1px #bec0c4;
		display: flex;
		/* justify-content: space-between; */
		/* align-items: center; */
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.cusGrade {
		/* border: 1rpx solid; */
		width: 15%;
		height: 100%;
		transform: rotate(-45deg);
		margin-top: 12rpx;
		margin-left: -102rpx;
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.left-img {
		width: 96rpx;
		height: 96rpx;
		margin-bottom: 70rpx;
		z-index: 0;
	}

	.aa {
		/* border: 1rpx solid; */
		width: 15%;
	}


	.cusList-wrap {
		margin-top: 20rpx;
	}

	.top {
		width: 100%;
		display: flex;
		flex-direction: row;
		/* border: 1rpx solid; */
		height: 50%;
	}

	.splitLine {
		width: 95%;
		height: 2rpx;
		border-top: solid #ACC0D8 1px;
	}

	.bom {
		width: 100%;
		/* border: 1rpx solid; */
		height: 49%;
		display: flex;
		flex-direction: row;
	}

	.kehutianjia {
		height: 50rpx;
		width: 50rpx;
		z-index: 999;
		/* margin-top: -100%; */
		position: absolute;
		position: fixed;
		margin-top: -9%;
		margin-left: 91%;
		/* background-color: #007AFF; */
	}

	.kehutianjia image {
		height: 50rpx;
		width: 50rpx;
	}

	.hj-screen-btn {
		/* border-left: #F0F0F0 6rpx solid; */
		/* padding: 0 20rpx 0 20rpx; */
		display: flex;
		/* justify-content: center; */
		align-items: center;
		font-size: 28rpx;

		text {
			margin: 0 0 0 20rpx;
		}
	}


	.screen-btn {
		border-left: #F0F0F0 6rpx solid;
		padding: 0 20rpx 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;

		text {
			margin: 0 0 0 20rpx;
		}
	}

	.iii {
		z-index: 19;
	}

	.vvv {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.hj-item {
		margin-top: 20rpx;
		border-radius: 18rpx;
		display: flex;
		justify-content: center;
		height: 65rpx;
		width: 80%;
		border: 1rpx solid #109EF8;
		font-size: 28rpx;
		align-items: center;
	}

	.hj-input {
		margin-left: 10%;
		margin-top: 20rpx;
		height: 65rpx;
		width: 80%;
		border-radius: 18rpx;
		/* background-color: #B0B0B0; */
		border: 1rpx solid #109EF8;
		font-size: 26rpx;
	}

	.mx-date-picker {
		z-index: 999;
	}


	.visit-wrap {
		align-items: center;
		justify-content: center;
	}
</style>
